﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Sample._Default" %>
<%@ Register Assembly="System.Web.Ajax" Namespace="System.Web.UI" TagPrefix="ajax" %>
<%@ Register TagPrefix="batik" Assembly="Batik.Web.UI.Controls" Namespace="Batik.Web.UI.Controls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test page</title>
    <style type="text/css">
        .sys-template { display: none; visibility: hidden; }
        .selected-row { background: #ffffcc; }
        .row { background: #ffffff; }
        body { font-family: Century Gothic; font-size: 9pt; }
        th { background-color: #003366; color: #ffffff; }
        .pg-normal {
                color: black;
                font-weight: normal;
                text-decoration: none;    
                cursor: pointer;    
            }
            .pg-selected {
                color: black;
                font-weight: bold;        
                text-decoration: underline;
                cursor: pointer;
            }
    </style>
</head>
<body xmlns:sys="javascript:Sys">
    <form id="form1" runat="server">
    <ajax:AjaxScriptManager runat="server">
        <CompositeScript ScriptMode="Debug">
            <Scripts>
                <asp:ScriptReference Name="MicrosoftAjaxTemplates.js" Assembly="System.Web.Ajax" />
            </Scripts>
        </CompositeScript>
   </ajax:AjaxScriptManager>
    <div>		
        <batik:DataView ID="DataView1" runat="server" AutoFetch="true" EnableViewState="False"
            BindingMode="ClientBinding" DataSourceID="MyScriptSource" RenderTable="true" BorderStyle="Solid" BorderColor="#777">
            <HeaderTemplate>
                <colgroup>
                    <col width="100px" />
                    <col width="150px" />
                    <col width="150px" />
                    <col />
                    <col width="40px" />
                    <col width="80px" />
                </colgroup>
                <tr>
                    <th>Product ID</th>
                    <th>Product Name</th>
                    <th>Product Model</th>
                    <th>Description</th>
                    <th>Price</th>
                    <th>Modified Date</th>
                </tr>
            </HeaderTemplate>
            <ItemTemplate>
                <tr style="cursor: pointer;" class="row">
                    <td style="width:100px">
                    <a href="#" sys:command="delete">Delete</a>|
                    <a href="#" sys:command="edit">Edit</a>
                    <batik:TextBox runat="server" DataType="Integer" DataFieldName="ProductID" RenderMode="Hidden">
                    </batik:TextBox>
                    </td>
                    <td>
                    <batik:TextBox runat="server" DataType="String" DataFieldName="Name" RenderMode="ReadOnly" Width="150">
                    </batik:TextBox>
                    </td>
                    <td>
                    <batik:TextBox runat="server" DataType="String" DataFieldName="ProductModel" RenderMode="ReadOnly" Width="150">
                    </batik:TextBox>
                    </td>
                    <td>
                    <batik:TextBox runat="server" DataType="String" DataFieldName="Description" RenderMode="ReadOnly">
                    </batik:TextBox>
                    </td>
                    <td>
                    <batik:TextBox runat="server" DataType="String" DataFieldName="Price" RenderMode="ReadOnly" Width="40">
                    </batik:TextBox>
                    </td>
                    <td>
                    <batik:TextBox runat="server" DataType="DateTime" DataFieldName="ModifiedDate" RenderMode="ReadOnly" Width="80">
                    </batik:TextBox>
                    </td>
                </tr>
            </ItemTemplate>
            <ProgressIndicatorTemplate>
                <tr style="background-color: #ffff7f;">
                    <td colspan="6">Please wait...
                </tr>
            </ProgressIndicatorTemplate>
            <EditTemplate >
                <tr class="row">
                    <td style="width:100px;">
                    <a href="#" sys:command="update">Update</a>
                    <a href="#" sys:command="cancelupdate">Cancel</a>
                    <batik:TextBox ID="TextBox1" runat="server" DataType="Integer" DataFieldName="ProductID" RenderMode="Hidden">
                    </batik:TextBox>
                    </td>
                    <td>
                    <batik:TextBox ID="TextBox5" runat="server" DataType="String" DataFieldName="Name" RenderMode="Edit" Width="96%">
                    </batik:TextBox>
                    </td>
                    <td>
                    <batik:TextBox ID="TextBox2" runat="server" DataType="String" DataFieldName="ProductModel" RenderMode="Edit" Width="96%">
                    </batik:TextBox>
                    </td>
                    <td>
                    <batik:TextBox ID="TextBox3" runat="server" DataType="String" DataFieldName="Description" RenderMode="Edit" Width="99%">
                    </batik:TextBox>
                    </td>
                    <td>
                    <batik:TextBox ID="TextBox4" runat="server" DataType="String" DataFieldName="Price" RenderMode="Edit" Width="86%">
                    </batik:TextBox>
                    </td>
                    <td>
                    <batik:TextBox runat="server" ID="gene3" DataType="DateTime" DataFieldName="ModifiedDate" RenderMode="ReadOnly" Width="80">
                    </batik:TextBox>
                    </td>
                </tr>
            </EditTemplate>
        </batik:DataView>
        <div id="pageNavigatorTemplate" class="sys-template">
            <a href="#" sys:innertext="{binding pageNumber}" sys:command="select" sys:commandargument="{{$index}}"></a>&nbsp;
        </div>
        <div id="pageNavigator">
			<a href="#" sys:command="first-page">&#171 First</a>&nbsp;
            <a href="#" sys:command="previous-page">&#171 Prev</a>&nbsp;
            <span id="itemPlaceholder"></span>
            <a href="#" sys:command="next-page">Next &#187</a>&nbsp;
            <a href="#" sys:command="last-page">&#187 Last</a>&nbsp;
        </div>
        
        <div id="pageNavPosition" style="text-align:center;"></div>
    </div>
	<batik:ScriptDataSource runat="server" ObjectTypeName="Sample.DataController" EntityTypeName="Sample.Product" ID="MyScriptSource" SelectMethod="GetProducts" DeleteMethod="DeleteProduct" UpdateMethod="UpdateProduct" InsertMethod="InsertProduct" >
	</batik:ScriptDataSource>
	<script type="text/javascript">
	    function insertData() {
	        var ds = $find('MyScriptSource');
	        var data = ds.get_data();
	        data.beginUpdate();
	        data.insert(0,{ ProductID:12345, Name:'Test Product'});
	        data.endUpdate();
	    }
	    function insertData2() {
	        var dv = $find('DataView1');
	        dv.insert();
	    }	    

    </script>
    <input type="button" value="Insert New Data" onclick="insertData2()" />	
    </form>
    
    
</body>
</html>
